<template>
  <div>
    <div v-if="isLoad">
      <van-skeleton title :row="4" />
    </div>
    <div v-else>
      <div style="display: flex; flex-wrap: wrap">
        <!-- <div class="main_small"><i class="el-icon-monitor"></i>&nbsp;Mac</div> -->
        <div
          class="main_small"
          @click="getIpad(item.id,item.path,item.name)"
          v-for="(item, index) in list"
          :key="index"
        >
          <i :class="item.icon"></i>&nbsp;{{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoad: true,
      list: [
        {
          name: "Mac",
          icon: "el-icon-monitor",
          path: "/ipadshop",
          id: "1",
        },
        {
          name: "iPad",
          icon: "el-icon-mobile",
          path: "/ipadshop",
          id: "2",
        },
        {
          name: "iPhone",
          icon: "el-icon-mobile-phone",
          path: "/ipadshop",
          id: "3",
        },
        {
          name: "Watch",
          icon: "el-icon-watch",
          path: "/ipadshop",
          id: "4",
        },
        {
          name: "Music",
          icon: "el-icon-service",
          path: "/ipadshop",
          id: "5",
        },
        {
          name: "配件",
          icon: "el-icon-ice-cream-square",
          path: "/ipadshop",
          id: "6",
        },
      ],
    };
  },
  mounted() {
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      500
    );
  },
  methods: {
    // this.$router.push({path:'/info',query:{id:id}})  
    getIpad(id,path,name) {
      let paths = path.toString()
      this.$router.push({
        path:paths,
        query:{
          id:id,
          name:name
        }
      });
    },
  },
};
</script>

<style scoped="scoped">
.main_small {
  background-color: white;
  width: 30%;
  margin-left: 2%;
  margin-top: 1.5vh;
  border-radius: 5px;
  height: 8vh;
  line-height: 8vh;
}
</style>